<template>
	<view class="viewport">
	    <!-- 搜索框 -->
	    
	    <!-- 分类 -->
	    <view class="categories">
	      <!-- 左侧：一级分类 -->
		  <view class="zuo">
			 <scroll-view class="primary" scroll-y>
	        <view v-for="(item, index) in categoryList" :key="item.num" class="item" @tap="activeItem(index)" :class="{ active: index === activeIndex }">
	          <text class="name"> {{item.tname}} </text>
	        </view>
	      </scroll-view> 
		  </view>
	      
		  
	      <!-- 右侧：二级分类 -->
	      <scroll-view class="secondary" scroll-y>
			  <view class="tian">
				  <button class="weihuxx" @click="weihu">维护分类</button>
		          <button class="tianjiashangpinxx" @click="tianjiashangpin">添加商品</button>
			  </view>
	       
	        <!-- 内容区域 -->
	        <view class="panel" v-for="item in childCategoryList" :key="item.id">
	          <view class="title">
	            <text class="name">{{item.tname}}</text>
	           
	          </view>
	          <view class="section">
	              
	            <navigator
	              v-for="goods in item.goods"
	              :key="goods"
	              class="goods"
				  
	              hover-class="none"
				    @click="xiangxi(goods.goodsId)"
	            >
	              <image
	                class="image"
	                :src="goods.goodsPics"
	              ></image>
	              <view class="name ellipsis">{{goods.goodsName}}</view>
	              <view class="price">
	                <text class="number">{{goods.varietys}}</text>
	              </view>
	            </navigator>
	              
	          </view>
	        </view>
	      </scroll-view>
	    </view>
		<tabBar></tabBar>
	  </view>
	  
</template>

<script setup>
	import {ref} from 'vue'
	import {http} from '/until/request.js'
	import {onLoad} from '@dcloudio/uni-app'
	import {onShow} from '@dcloudio/uni-app'
	//一级分类列表
		const categoryList=ref([])
		
		//二级分类及商品列表
		const childCategoryList=ref([])
		
		const goodsP=ref([])
	const activeIndex=ref(0)
	//获取商品分类数据
	const shangpinfenlei=async()=>{
		const ll= await http({
			url:'/lft/stypes/strpe',
			menubar:'get'
		})
		
		categoryList.value=ll.data
	}
	
	
	//商品显示
	const shangpin=async()=>{
		const res=await http({
			url:'/lft/stypes/stypesid',
			menubar:'get'
		})
		console.log(res.data) 
		const rr=ref('https://this-aliyun-bucket.oss-cn-shanghai.aliyuncs.com/7af1d775929a407f85d29c5c0ef51fa6.jpg')
		childCategoryList.value=res.data
		console.log(categoryList.value)
		console.log(1)
		for(let i=0;i<res.data.length;i++){
			const cc=res.data[i].goods
			childCategoryList.value.goods=cc
			for(let j=0;j<cc.length;j++){
				const iamge=cc[j].goodsPics
				const xx=ref(null)
				if(iamge.length>124){
					console.log(0)
					xx.value='data:image/jpeg;base64,'+iamge;
				}else{
					xx.value=atob(iamge)
				}
				cc[j].goodsPics=xx	
			}
		}
	
		
		
	}
	
	
	//点击商品分类后的页面显示
	const activeItem=async(index)=>{
		activeIndex.value=index
		const ll= categoryList.value[index]
		console.log(ll)
		const res=await http({
			url:'/lft/goods/category/'+ll.id
		}) 
		console.log(res.data)
		childCategoryList.value=res.data
		for(let i=0;i<res.data.length;i++){
			const cc=res.data[i].goods
			childCategoryList.value.goods=cc
			for(let j=0;j<cc.length;j++){
				const iamge=cc[j].goodsPics
				const xx=ref(null)
				if(iamge.length>124){
					console.log(0)
					xx.value='data:image/jpeg;base64,'+iamge;
				}else{
					xx.value=atob(iamge)
				}
				cc[j].goodsPics=xx	
			}
		}
	}
	//详细页面
	const xiangxi=(xx)=>{
		const id=xx
		console.log(xx)
		uni.navigateTo({
			url:`/pages/supplier/wjk/xiangxi?id=${id}`
		})
	}
	const weihu=()=>{
		uni.navigateTo({
			url:'/pages/supplier/wjk/weihu',
		})
	}
	const tianjiashangpin=()=>{
		uni.navigateTo({
			url:'/pages/supplier/wjk/increase'
		})
	}
	
	// onLoad((e)=>{
	// 	shangpinfenlei();
	// 	shangpin();
	// })
	onLoad(()=>{
		shangpinfenlei();
		shangpin();
	})
	
</script>

<style lang="scss" scoped>
	.tian{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.weihuxx{
			background-color: #0496d9;
				color: white;
				width: 280rpx;
	}
	.tianjiashangpinxx{
					width: 280rpx;
					background-color: #15B54A;
					background: rgba(136, 217, 123);
					color: white;
	}
	page {
	  height: 100%;
	  overflow: hidden;
	}
	.viewport {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	}
	.search {
	  padding: 0 30rpx 20rpx;
	  background-color: #fff;
	  position: fixed;
	    width: 100%;
	    z-index: 1000; /* 确保搜索栏在其他内容之上 */
	    background-color: #fff; /* 可选：设置背景颜色以覆盖其他内容 */
	  .input {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 64rpx;
	    padding-left: 26rpx;
	    color: #8b8b8b;
	    font-size: 28rpx;
	    border-radius: 32rpx;
	    background-color: #f3f4f4;
	  }
	}
	.icon-search {
	  &::before {
	    margin-right: 10rpx;
	  }
	}
	/* 分类 */
	.categories {
	  flex: 1;
	  min-height: 400rpx;
	  display: flex;
	}
	.zuo{
		width: 50%;
		margin-top: 10px;
	}
	/* 一级分类 */
	.primary {
		width: 100%;
		
		 position: fixed;
		  
		  z-index: 1000; /* 确保搜索栏在其他内容之上 */
	  overflow: hidden;
	  width: 180rpx;
	  flex: none;
	  background-color: #f6f6f6;
	  .item {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 96rpx;
	    font-size: 26rpx;
	    color: #595c63;
	    position: relative;
	    &::after {
	      content: '';
	      position: absolute;
	      left: 42rpx;
	      bottom: 0;
	      width: 96rpx;
	      border-top: 1rpx solid #e3e4e7;
	    }
	  }
	  .active {
	    background-color: #fff;
	    &::before {
	      content: '';
	      position: absolute;
	      left: 0;
	      top: 0;
	      width: 8rpx;
	      height: 100%;
	      background-color: #27ba9b;
	    }
	  }
	}
	.primary .item:last-child::after,
	.primary .active::after {
	  display: none;
	}
	/* 二级分类 */
	.secondary {
	  background-color: #fff;
	  margin-top: 10px;
	  .carousel {
	    height: 200rpx;
	    margin: 0 30rpx 20rpx;
	    border-radius: 4rpx;
	    overflow: hidden;
	  }
	  .panel {
	    
	  }
	  .title {
	    height: 60rpx;
	    line-height: 60rpx;
	    color: #333;
	    font-size: 28rpx;
	    border-bottom: 1rpx solid #f7f7f8;
	    .more {
	      float: right;
	      padding-left: 20rpx;
	      font-size: 24rpx;
	      color: #999;
	    }
	  }
	  .more {
	    &::after {
	      font-family: 'erabbit' !important;
	      content: '\e6c2';
	    }
	  }
	  .section {
	    width: 100%;
	    display: flex;
	    flex-wrap: wrap;
	    padding: 20rpx 0;
	    .goods {
	      width: 150rpx;
	      margin: 0rpx 30rpx 20rpx 0;
	      &:nth-child(3n) {
	        margin-right: 0;
	      }
	      image {
	        width: 150rpx;
	        height: 150rpx;
			border-radius: 10px 10px 10px 10px; /* 添加圆角，这里设置的是底部两个角 */
	      }
	      .name {
	        padding: 5rpx;
	        font-size: 22rpx;
	        color: #333;
	      }
	      .price {
	        padding: 5rpx;
	        font-size: 18rpx;
	        color: #cf4444;
	      }
	      .number {
	        font-size: 24rpx;
	        margin-left: 2rpx;
	      }
	    }
	  }
	}
</style>
